<template>
  <baidu-map class="map" :center="center" :zoom="zoom" @ready="handler">
    <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>
    <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>
    <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
    <bm-local-search :key="index" v-for="(item,index) in distribution"
                     :keyword="item.address" :auto-viewport="true" :location="mudidi"></bm-local-search>

    <bm-driving :key="index" v-for="(item,index) in distribution"
                @searchcomplete="handleSearchComplete"
                start="湖南省张家界市永定区"
                :end="item.address"
                :auto-viewport="true"
                policy="BMAP_DRIVING_POLICY_LEAST_DISTANCE"
                :panel="false"
                location="湖南"
    >
      <bml-lushu
          @stop="reset"
          :path="path"
          :icon="icon"
          :play="play"
          :rotation="true"
          speed="40000"
          :content="item.driver">
      </bml-lushu>
    </bm-driving>



  </baidu-map>
</template>
<script>
import {FindAllDistribution} from "@/api/distribution";
import { BmlLushu } from 'vue-baidu-map'
export default {
  components: {
    BmlLushu
  },
  data () {
    return {
      infoWindow: {
        show: true,
        contents: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
      },
      play: true,
      center: {lng: 0, lat: 0},
      zoom: 3,
      distribution: [],
      points: [],
      target: {lng: 111.5332, lat: 27.3779},
      icon: {
        url: 'http://api.map.baidu.com/library/LuShu/1.2/examples/car.png',
        size: {width: 52, height: 26},
        opts: {anchor: {width: 27, height:13}}
      },
      map:{
        "上海市": [121.4648, 31.2891],
        "云南省": [101.0652, 25.1807],
        "内蒙古自治区": [108.670801, 40.818311],
        "北京市": [116.4551, 40.2539],
        "台湾省": [120.0254, 23.5986],
        "吉林省": [125.7746, 43.5938],
        "四川省": [101.9199, 30.1904],
        "天津市": [117.4219, 39.4189],
        "宁夏回族自治区": [105.9961, 37.3096],
        "安徽省": [117.2461, 32.0361],
        "山东省": [118.7402, 36.4307],
        "山西省": [112.4121, 37.6611],
        "广东省": [113.4668, 22.8076],
        "广西壮族自治区": [107.7813, 23.6426],
        "新疆维吾尔自治区": [84.9023, 42.148],
        "江苏省": [118.8586, 32.915],
        "江西省": [116.0156, 27.29],
        "河北省": [115.4004, 39.4688],
        "河南省": [113.0668, 33.8818],
        "浙江省": [120.498, 29.0918],
        "海南省": [109.9512, 19.2041],
        "湖北省": [112.2363, 31.1572],
        "湖南省": [111.5332, 27.3779],
        "澳门特别行政区": [111.5547, 22.1484],
        "甘肃省": [99.7129, 38.166],
        "福建省": [118.3008, 25.9277],
        "西藏自治区": [87.8695, 31.6846],
        "贵州省": [106.6113, 26.9385],
        "辽宁省": [122.0438, 41.0889],
        "重庆市": [107.7539, 30.1904],
        "陕西省": [109.5996, 35.7396],
        "青海省": [95.2402, 35.4199],
        "香港特别行政区": [114.1178, 22.3242],
        "黑龙江省": [126.1445, 48.7156]
      },
      path:[],
      mudidi:'湖南省'
    }
  },
  async created() {
    await FindAllDistribution().then((res) => {
      if (res.status) {
        this.distribution = []
        res.data.forEach((item) => {
          if(item.status===1){
            this.distribution.push(item)
          }

        })
        console.log(this.distribution)
        this.distribution.forEach((item) => {
          let address = item.address.trim().split(" ")[0]
          console.log(address)
          let position = {
            lng: this.map[address][0] + Math.random() * 0.1 + 0.1,
            lat: this.map[address][1] + Math.random() * 0.1 + 0.1
          }

          if(position===undefined){
            position = {lng: Math.random() * 40 + 85, lat: Math.random() * 30 + 21}
          }

          this.points.push(position)
          this.center = position

        })
      }
    })
    console.log(this.points)
  },
  methods: {
    reset () {
      this.play = false
    },
    handleSearchComplete (res) {
      this.path = res.getPlan(0).getRoute(0).getPath()
    },
    goto(index){
      let item = this.distribution[index]
      let address = item.address.trim().split(" ")[0]
      let position = {
        lng: this.map[address][0] + Math.random() * 0.1 + 0.1,
        lat: this.map[address][1] + Math.random() * 0.1 + 0.1
      }

      if(position===undefined){
        position = {lng: Math.random() * 40 + 85, lat: Math.random() * 30 + 21}
      }
      this.center = position
    },
    handler ({BMap, map}) {
      console.log(BMap, map)
      this.center.lng = 116.404
      this.center.lat = 39.915
      this.zoom = 15
    }
  }
}
</script>
<style>
.map {
  width: 100%;
  height: 100vh;
  position: relative;
}
</style>
